<template>
	
		<view class="left" :style="'height:calc(100vh - 92rpx - '+GapHeight+'rpx)'">
			<scroll-view class="scroll-view" scroll-y>
				<view class="category-menu">
					<view class="menu_item" @click="changetab(i)" v-for="(item, i) in list" :key="i">
						<text  :class="[a_id == i ? 'active text' : 'text']">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	
export default {
	props: {
		list: {
			type: Array,
			default: []
		}
	},
	data(){
		return {
			a_id:0
		}
	},
	computed:{
		...mapState({
		
			GapHeight:state=>state.GapHeight
		})
	},
	methods:{
	changetab(i) {
		this.a_id = i;
		this.$emit('change',i)
	},
	}
};
</script>

<style lang="scss" scoped>
.left {
	width: 92px;
	float: left;
	// height: calc(100% - 92rpx);
	// height: calc(100vh - 92rpx - 120rpx);
	background: #F5F5F5;
	.scroll-view {
		width: 92px;
		 height: 100%;
		box-sizing: border-box;
		background: #F5F5F5;
		.category-menu {
			.menu_item {
				height: 50px;
				.text {
					width: 92px;
					display: block;
					height: 100rpx;
					line-height: 100rpx;					
					margin: 0 auto;
					font-size: 24rpx;
					background-color: #F5F5F5;
					text-align: center;
					color: #212121;
					box-sizing:border-box;
					border-left: 4rpx solid #F5F5F5;
					
					position: relative;
					&.active {
						 font-weight: bold;
						 font-size: 28rpx;
						// border-left: 8rpx solid var(--main-color);
						background: #fff;
						// color: #fff;
						color: var(--main-color);
						&::before{
							content: '';
							width: 8rpx;
							height: 40rpx;
							position: absolute;
							left: 0;
							background-color:var(--main-color) ;
							top: 30rpx;
						}
						
					}
				}
			}
		}
	}
}
</style>
